<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>民俗风情</title>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: url('images/customs.jpg') no-repeat center center fixed; /* 设置背景图片 */
            background-size: cover;
            overflow-x: hidden; /* 防止页面水平滚动 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        header {
            background-color: #8B0000;
            color: white;
            padding: 5px 0;
            text-align: center;
            font-size: 1.2em;
            width: 100%;
        }

        nav ul {
            list-style-type: none;
            padding: 0;
            text-align: center;
            margin: 0;
        }

        nav ul li {
            display: inline-block;
            margin: 0 15px;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: bold;
            position: relative;
            transition: color 0.3s ease, transform 0.3s ease;
        }

        nav ul li a:hover {
            color: #FFD700;
            transform: rotateY(20deg);
        }

        nav ul li a:active {
            color: #FF4500;
            transform: rotateY(-20deg);
        }

        nav ul li a::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -5px;
            width: 0;
            height: 2px;
            background-color: #FFD700;
            transition: width 0.3s ease, left 0.3s ease;
        }

        nav ul li a:hover::after {
            width: 100%;
            left: 0;
        }

        main {
            padding: 2em;
            width: 90%;
            max-width: 1200px;
            background: rgba(255, 255, 255, 0.7); /* 背景透明度 */
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 10px;
            text-align: center;
        }

        section h2 {
            margin-bottom: 20px;
            border-bottom: 2px solid #333;
            padding-bottom: 0.5em;
        }

        .container {
            display: flex;
            height: 500px;
            overflow: hidden;
            border-radius: 0;
            position: relative;
        }

        .container .inner {
            width: 160px;
            height: 500px;
            transition: all 1s;
            position: relative;
            overflow: hidden;
        }

        .container .inner img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .container:hover .inner {
            width: 40px;
        }

        .container .inner:hover {
            width: 760px;
        }

        /* 文字介绍 */
        .text {
            text-align: center;
            padding: 10px;
            background: #B22222;
            color: white;
            border-radius: 5px;
            margin-top: 10px;
            font-size: 1.2em;
        }

        footer {
            background-color: #8B0000;
            color: white;
            padding: 10px;
            text-align: center;
            width: 100%;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>中国传统文化推广 - 民俗风情</h1>
        <nav>
            <ul>
                <li><a href="index.html">主页</a></li>
                <li><a href="history.html">历史与传说</a></li>
                <li><a href="philosophy.html">哲学思想</a></li>
                <li><a href="arts.html">文学艺术</a></li>
                <li><a href="festivals.html">传统节日</a></li>
                <li><a href="customs.html">民俗风情</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>民俗风情</h2>
            <div class="container">
                <div class="inner">
                    <img src="images/lz.jpg" alt="龙舟赛">
                    <div class="description">龙舟赛 - 端午节的重要活动</div>
                </div>
                <div class="inner">
                    <img src="images/ws.jpg" alt="舞狮">
                    <div class="description">舞狮 - 传统的中国表演艺术</div>
                </div>
                <div class="inner">
                    <img src="images/gy.jpg" alt="民间手工艺">
                    <div class="description">民间手工艺 - 历史悠久的艺术形式</div>
                </div>
                <div class="inner">
                    <img src="images/sf.jpg" alt="书法">
                    <div class="description">书法 - 中国传统的书写艺术</div>
                </div>
                <div class="inner">
                    <img src="images/pc.jpg" alt="茶道">
                    <div class="description">茶道 - 中国古老的文化仪式</div>
                </div>
            </div>
            <div class="text">
                <p>民俗文化，又称为传统文化，是指民间民众的风俗生活文化的统称。也泛指一个民族、地区中集居的民众所创造、共享、传承的风俗生活习惯。是在普通人民群众的生产生活过程中所形成的一系列非物质的东西，民俗及民众的日常生活。
“民间文化”是相对于“精英和典籍文化”而言的，是人民大众用心灵和双手创造的文化，是人民大众自发创造、满足自己的一种生活文化</p>
            </div>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 202006402111李采珍</p>
    </footer>
</body>
</html>
